<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" id="user">
        </p>
        <p>
            <input id="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // var arr = ["a", "b", "c", "d"];
    // var str = arr.join("-");
    // console.log(str);


    // split()  用特定的字符将字符串拆分为数组
    // 返回值: 拆分后的数组

    // var str = "a-b-c-d";
    // // var arr = str.split("-");
    // var arr = str.split("");  // 截取每一个字符
    // console.log(arr);

    // toUpperCase()   字符串转大写(针对于字母)
    // toLowerCase()   字符串转小写(针对于字母)
    // 返回值: 转化后的新字符串

    // var str = "HeLLo WOrlD123456+-*/%哈哈";

    // var result = str.toUpperCase();
    // console.log(result);

    // var result = str.toLowerCase();
    // console.log(result);


    // trim()   去除首尾空格
    // trimLeft() / trimStart()   去除头部空格
    // trimRight() / trimEnd()   去除尾部空格

    var userInp = document.getElementById("user");
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // var user = userInp.value.trim();
        // var user = userInp.value.trimLeft();
        // var user = userInp.value.trimRight();
        // console.log(1, user);

        var user = userInp.value.trim();  //取值之后去除首尾空格
        userInp.value = user;
    }




</script>

</html>